<template>
  <div>
    <div class="my-form-container" style="width: 100% !important; height: 100%;margin:0">
      <el-form :model="formData" :rules="rules" ref="ruleForm" hide-required-asterisk="true">
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="zybc">
            <div class="my-form-item-label">
              专业班次
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.zybc }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="bm">
            <div class="my-form-item-label">
              别名
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.bm }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="xyd">
            <div class="my-form-item-label">
              学员队
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.xyd }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="nj">
            <div class="my-form-item-label">
              年级
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.nj }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="zy">
            <div class="my-form-item-label">
              专业【层次】
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.zy }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="xq">
            <div class="my-form-item-label">
              所在校区
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.xq }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="edrs">
            <div class="my-form-item-label">
              额定人数
              <span class="mustW">*</span>
            </div>
            <span class="itemInput">{{ formData.edrs }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="xyxxtj">
            <div class="my-form-item-label">
              学员信息统计
            </div>
            <div class="report-button" @click="handleReport()" style="margin: 28px 22px; height: 27px; line-height: 27px; background: #f1f8fe; border: 1px solid #51aef6; color: #51aef6;">
              <img src="../../../assets/assessment/icon-look.png" />
              <span>查看</span>
            </div>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="gdskjs">
            <div class="my-form-item-label">
              固定上课教室
            </div>
            <span class="itemInput">{{ formData.gdskjs }}</span>
          </el-form-item>
          <el-form-item class="my-form-item" prop="gdzxjs">
            <div class="my-form-item-label">
              固定自习教室
            </div>
            <span class="itemInput">{{ formData.gdzxjs }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="zybczy">
            <div class="my-form-item-label">
              专业班次主页
            </div>
            <span class="itemInput">{{ formData.zybczy }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" prop="bz">
            <div class="my-form-item-label">
              备注
            </div>
            <span class="itemInput">{{ formData.bz }}</span>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div style="display: flex;">
      <div class="report-button" @click="handleClose">
        <span>关闭</span>
      </div>
    </div>
  </div>
</template>

<script>
import { querysppecltyId } from '@/api/classHoursAddList/addList'
export default {
  data () {
    return {
      formData: {
        id: '',
        zybc: '',
        bm: '',
        xyd: '',
        nj: '',
        zy: '',
        xq: '',
        edrs: '',
        zybczy: '',
        gdskjs: '',
        gdzxjs: '',
        bz: ''
      }
    }
  },
  mounted: function () {
    let zybcid = this.$route.query.zybcid
    if (zybcid === undefined) {
      zybcid = localStorage.getItem('classId')
    }
    localStorage.setItem('classId', zybcid)
    if (zybcid === '') {
      this.handleResetForm()
    } else {
      this.handleInitForm(zybcid)
    }
  },
  methods: {
    handleInitForm: function (id) {
      querysppecltyId(id).then(res=>{
        let data = res.data.data;
        this.formData = {
          id:data.id,
          zybc: data.className,
          bm: data.alias,
          xyd: data.studenteamname,
          nj: data.year,
          zy: data.specialtyName+'【' + data.trainingLevel + '】',
          xq: data.campus,
          edrs: data.ratedNumber,
          zybczy: '专业班次主页',
          gdskjs: data.studyRoom,
          gdzxjs: data.selfStudyRoom,
          bz: data.remark
        }
      })
    },
    handleReport: function () {
      this.$router.push({
        path: '/admin/csTest/csReport',
        query: {
          id: this.formData.id
        }
      })
    },
    handleClose: function () {
      this.$router.push({ path: '/admin/csTest/csTeat' });
    }
  }
}
</script>

<style lang="less" scoped>
  .my-form-item {
    width: 100%;
    height: 85px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label{
        width: 220px;
        padding-left: 60px;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        color: #004CA7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
        margin-left: -1px;
        .mustW {
          color: red;
        }
      }
      .el-form-item__content{
        display: flex;
      }
    }
  }
  .itemInput {
    width: 100%;
    margin: 22px;
  }
  .report-button {
    width: 80px;
    height: 35px;
    line-height: 35px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 50px auto;
    background: #FFEEEF;
    border: 1px solid #FA533C;
    color: #FA533C;
    img {
      width: 16px;
      height: 13px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 5px;
    }
  }
</style>
